iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
Modern Web

走入前端,才從0開始數,初學者歷程系列 第 8

day8-CSS選擇器筆記

  • 分享至 

  • xImage
  •  

在寫CSS開始前,記得要做CSS reset動作。

為什麼呢?

那是因為每家瀏覽器的CSS設定都不一樣,如果今天A推了padding:10px、B推了padding:5px,那原本的CSS設定就會根據A、B瀏覽器設定做更改,但會發現,原本我的排版不是好好的嗎!怎麼換個瀏覽器就不一樣了(氣氣氣,拜託我已經花這麼多時間了總不可能在一個一個改吧!!!

於是就有css reset的產生了,它可以讓各家瀏覽器預設外觀都變成一樣。

這是目前我所使用的:https://meyerweb.com/eric/tools/css/reset/

不過網路上也有其他版本,可以根據自己需求做選擇。


今天的筆記整理:參考資料從金魚都能懂的CSS選擇器及MDN。

CSS屬性選取器

  • 選取“擁有特定屬性”的物件

寫法:[HTML屬性],只要HTML物件內,擁有這個屬性的物件都會被選取到。

<img src="" alt="貓貓">
<img src="" >
img{
  border: 5px solid blue;
  width: 150px;
  height: 150px;
  margin: 30px;
}
img[alt]{
  border: none;
}

https://ithelp.ithome.com.tw/upload/images/20200922/20130106NfhDaXy7dP.png

可以看到沒有寫alt的沒顯示外框,可以方便辨識漏掉哪些沒加alt屬性的。

  • 選取屬性質“完全等於”特定文字的物件:選取嚴格屬性值要完全相同

寫法:[屬性=值]

<img src="" alt="貓貓">
<img src="" alt="貓貓大哥大">
<img src="" alt="狗狗">
img[alt="貓貓"] {
  border: 5px solid pink;
}

https://ithelp.ithome.com.tw/upload/images/20200922/20130106uXNu9ngZeJ.png

可以得到alt擁有貓貓值的物件變成粉色外框,有個重點,你要選取的屬性值必須完全相同,否則是選不到的,例如:寫成img[alt="貓貓大哥1"],img[alt=" 貓貓大哥"],這兩個都是選不到的喔。

  • 選取屬性值“開頭等於”特定文字的物件

寫法:[屬性^=值],就是當開頭文字等於你所寫的就能選到。

img[alt^="貓貓"] {
  border: 5px solid pink;
}

https://ithelp.ithome.com.tw/upload/images/20200922/201301067BbmLw6Kp4.png

承上題,這樣開頭是“貓貓”的都會擁有粉色外框啦~

  • 選取屬性值“結尾等於”特定文字

寫法:[屬性$=值],就是選取HTML結尾等於你所寫的值。

<a href="cat.png">貓貓</a>
<a href="cat.svg">老大</a>
<a href="cat.jpg">喵喵</a>
a[href$=".png"]{
  background-color: red;
}
a[href$=".svg"]{
  background-color: blue;
}
a[href$=".jpg"]{
  background-color: pink;
}

https://ithelp.ithome.com.tw/upload/images/20200922/20130106rA5Lh9AP9Q.png

這樣就可以快速分類出檔案,覺得超方便的!

  • 選取屬性質中“包含特定文字”的物件

寫法:[屬性*=值],好處是像google東西直接輸入關鍵字就可以找到啦!

(應該是裡面最方便最人性化的一個)

<img src="" alt="貓貓大哥">
<img src="" alt="貓貓大哥大">
<img src="" alt="狗狗">
img[alt*="大"]{
  background-color: pink;
}

https://ithelp.ithome.com.tw/upload/images/20200922/201301067nozYxxrm0.png

裡面只要有"大"的就會變成粉紅色背景。

  • 選取屬性值中"包含特定單字"的物件

寫法:[屬性~=值],注意:指定單字而非字串(英文比較明顯)

<img src="" alt="catiscute">
<img src="" alt="cat is cute">
img[alt~="cat"]{
  background-color: pink;
}

https://ithelp.ithome.com.tw/upload/images/20200922/20130106ExpowpiXrj.png

這樣可以只能選到第二段,因為cat是一個單字,非字串。


  • 同層"相鄰"選擇器

A+B:與A同層相鄰的B

<ul>
  <li>貓貓</li>
  <li>狗狗</li>
  <li>水獺</li>
</ul>
li:first-of-type + li{
  color:red;
}
// 第二行"狗狗"會變成紅色

https://ithelp.ithome.com.tw/upload/images/20200922/20130106DJCB6TF5QT.png

  • 同層"全體"選取器

A~B 選取A後面的所有B

<h2>22222</h2>
<p>11111</p>
<p>33333</p>
<span>5555</span>
<p>44444</p>
h2 ~ span {
  color: red;
  font-size: 30px;
}

https://ithelp.ithome.com.tw/upload/images/20200922/20130106Ky4qaOyZ5m.png

  • 子選擇器

A>B:選取A下層的B

<div>
  <h2>22222</h2>
  <span>5555</span>
  <p>11111</p>
  <p>33333</p>
  <p>44444</p>
</div>
div > h2 {
  color: red;
  font-size: 30px;
}

https://ithelp.ithome.com.tw/upload/images/20200922/201301062ceO7dmnHF.png


上一篇
day7-css優先權
下一篇
day9-嘿Animation就是CSS動畫
系列文
走入前端,才從0開始數,初學者歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言